
<template>
  <div>
    <el-card style="width: 50%">
      <el-form :model="user" label-width="80px" style="padding-right: 20px">
        <el-form-item label="用户头像">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9090/file/upload"
              :headers="{token: user.token}"
              multiple
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="user.avatar" :src="user.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="user.username" style="width: 50%"  placeholder="请输入用户名" disabled ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="user.name" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="user.sex" label="男">男</el-radio>
          <el-radio v-model="user.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="user.phone" style="width: 50%" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" style="width: 50%" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="textarea" v-model="user.address" style="width: 50%" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align: center; margin-bottom: 20px">
            <el-button type="primary" @click="update">保存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  name: "Person",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('honey-user') || '{}')
    }
  },
  mounted() {

  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === 1) {
        this.fileList = fileList;
        ElMessage.success('上传成功');
        this.user.avatar = response.data;
        console.log(response, file, fileList, this.user);
      } else {
        ElMessage.error(response.msg);
      }
    },
    update() {
      request.put('/user/update', this.user).then(response => {
        if (response.code === 1) {
          this.$message.success('保存成功')
          localStorage.setItem('honey-user', JSON.stringify(this.user));

          //触发父级的数据更新
          this.$emit('update:user', this.user);
        } else {
          this.$message.error('保存失败')
        }
      })
    },
  }
}
</script>

<style>
/deep/.el-form-item__error {
  font-weight: bold;
}

/deep/.el-upload {
  border-radius: 50%;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;

}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
